<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- <router-link to="/about">About</router-link> -->
    <Nav message="0" />

    <!-- <van-button type="default" @click="test">默认按钮</van-button> -->

    <van-tabs @click="cutoverCategori" color="rosybrown">
      <van-tab
        v-for="index in productCategory.length"
        :title="productCategory[index - 1].categoryName"
        :key="index.categorySort"
      >
        <van-card
          v-for="item in productSpu"
          :key="item.spuId"
          :id="item.spuId"
          :price="item.spuPriceBetween"
          :thumb="item.spuHomeImage"
          @click="skuDetails(item.spuId)"
        >
          <template #title>
            <div class="van-multi-ellipsis--l3" style="font-size: 0.8rem">
              {{ item.spuTitle }}
            </div>
          </template>
          <template #price>
            <div style="font-size: 0.9rem; font-weight: 700">
              ￥{{ item.spuPriceBetween }}
            </div>
          </template>
        </van-card>
      </van-tab>
    </van-tabs>

    <div style="position: absolute; left: 50%" class="beian">
      <div style="position: relative; left: -50%">
        <a id="beian-a" href="https://beian.miit.gov.cn"
          >晋ICP备2020014144号-2</a
        >
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Nav from "@/components/Nav.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
    Nav,
  },
  created() {
    const _this = this;
    axios.get(this.$api + "product/home").then(function (resp) {
      _this.productSpu = resp.data.data.productSpu;
      _this.productCategory = resp.data.data.productCategory;
    });

    let code = this.$route.query.code;
    console.log(this.$route.query.code);
    console.log(code);
    if (code != "" && code != undefined) {
      console.log("code不等于空");
      axios
        .get(this.$api + "verifyQqLoginCode", {
          params: {
            code: code,
          },
        })
        .then((result) => {
          console.log("发送一次请求");
          console.log(result);
          if (result.data.code == 0) {
            console.log("扫码成功");
            //跳转首页
            console.log("打印token");
            console.log(result.data.data.jwtToken);
            _this.$cookie.set("shoptoken", result.data.data.jwtToken, {
              expires: 1,
              domain: "localhost",
            });
            _this.$cookie.set("shoptoken", result.data.data.jwtToken, {
              expires: 1,
              domain: "127.0.0.1",
            });
            _this.$cookie.set("shoptoken", result.data.data.jwtToken, {
              expires: 1,
              domain: ".liuzhuangzhuang1993.cn",
            });
            window.location.href = "https://www.liuzhuangzhuang1993.cn";
            // window.location.href="http://127.0.0.1:8081";
          }
        });
    }
  },
  data() {
    return {
      productSpu: [
        // {
        //   spuId: 1,
        //   spuTitle:
        //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
        //   spuPriceBetween: "10000.00",
        //   spuImage:
        //     "https://shop1104.oss-cn-shanghai.aliyuncs.com/imac-white-1.png",
        // },
        // {
        //   spuId: 2,
        //   spuTitle:
        //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
        //   spuPriceBetween: "10000.00",
        //   spuImage:
        //     "https://m.media-amazon.com/images/I/71BiCgaod4L._AC_UY436_QL65_.jpg",
        // },
        // {
        //   spuId: 3,
        //   spuTitle:
        //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
        //   spuPriceBetween: "10000.00",
        //   spuImage:
        //     "https://images-na.ssl-images-amazon.com/images/I/61QRBRmHx1L._AC_SL1200_.jpg",
        // },
        // {
        //   spuId: 4,
        //   spuTitle:
        //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
        //   spuPriceBetween: "10000.00",
        //   spuImage: "../static/imac-gray-1.png",
        // },
        // {
        //   spuId: 5,
        //   spuTitle:
        //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
        //   spuPriceBetween: "10000.00",
        //   spuImage: "../static/imac-gray-1.png",
        // },
      ],
      productCategory: [
        // {
        //   categoryName: "电子",
        //   categorySort: 1,
        // },
        // {
        //   categoryName: "服装",
        //   categorySort: 2,
        // },
        // {
        //   categoryName: "日用",
        //   categorySort: 3,
        // },
      ],
    };
  },
  methods: {
    cutoverCategori(index) {
      const _this = this;
      axios
        .get(
          this.$api +
            "product/findProductListByCategoryId/" +
            this.productCategory[index].categorySort
        )
        .then(function (resp) {
          _this.productSpu = resp.data.data;
        });

      switch (index) {
        case 0:
          this.phones = [
            // {
            //   id: 1,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "../static/imac-gray-1.png",
            // },
            // {
            //   id: 2,
            //   title:
            //     "Apple Mac Pro Desktop Computer, 3.5GHz 8-Core Intel Xeon W, 32GB Memory, 256GB SSD, Radeon Pro 580X 8GB, Magic Mouse 2, Stainless Steel with Feet",
            //   price: "10000.00",
            //   desc:
            //     "Apple Mac Pro Desktop Computer, 3.5GHz 8-Core Intel Xeon W, 32GB Memory, 256GB SSD, Radeon Pro 580X 8GB, Magic Mouse 2, Stainless Steel with Feet",
            //   thumb: "../static/imac-white-1.png",
            // },
            // {
            //   id: 3,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "../static/ipad.png",
            // },
            // {
            //   id: 4,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 5,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 6,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 7,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 8,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 9,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 10,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
          ];
          break;
        case 1:
          this.phones = [
            // {
            //   id: 1,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 2,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 3,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
          ];
          break;
        case 2:
          this.phones = [
            // {
            //   id: 1,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 2,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 3,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
            // {
            //   id: 4,
            //   title:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   price: "10000.00",
            //   desc:
            //     "CASEJOLY Designed for iPhone 12 Pro Max Case 6.7 Inch [Military Grade Drop Protection] Translucent Matte Hard PC Back & TPU Bumper, Shockproof Protective & Slim, Fit for iPhone",
            //   thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
            // },
          ];
          break;
      }
    },
    skuDetails(spuId) {
      // console.log(spuId);
      this.$router.push({ path: "/item", query: { spuId: spuId } });
    },
    test() {
      this.$cookie.set("shoptoken", "shoptokenvalue", {
        expires: 1,
        domain: "localhost",
      }); //0.01过期时间15分钟

      // this.$cookie.remove('shoptoken');

      var q = this.$cookie.get("shoptoken");
      console.log(q);
    },
  },
};
</script>
<style scope>
.beian {
  position: fixed;
  bottom: 0;
  font-size: 0.9rem;
}
#beian-a:visited {
  color: #555;
}
#beian-a:link {
  color: #555;
}
</style>